<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '咨询',
  },
}
</route>

<template>
  <view>
    <wd-navbar title="咨询" fixed placeholder safeAreaInsetTop></wd-navbar>
    <wd-search v-model="searchValue" placeholder="搜索相关内容" cancel-txt="搜索" />

    <view class="sticky top-20 z-10 px-1">
      <scroll-view scroll-x="true" style="white-space: nowrap">
        <view style="text-align: center; background: #fff" class="flex">
          <wd-picker :columns="option" v-model="value1" use-default-slot>
            <wd-button custom-class="filter-btn">咨询方向</wd-button>
          </wd-picker>
          <wd-picker :columns="address" v-model="value2" use-default-slot>
            <wd-button custom-class="filter-btn">咨询地址</wd-button>
          </wd-picker>
          <wd-picker :columns="price" v-model="value3" use-default-slot>
            <wd-button custom-class="filter-btn">咨询价格</wd-button>
          </wd-picker>
          <wd-picker :columns="desc" v-model="value4" use-default-slot>
            <wd-button custom-class="filter-btn">咨询师介绍</wd-button>
          </wd-picker>
          <wd-picker :columns="filter" v-model="value5" use-default-slot>
            <wd-button custom-class="filter-btn">筛选</wd-button>
          </wd-picker>
        </view>
      </scroll-view>
    </view>

    <wd-cell-group>
      <view
        v-for="(item, index) in counselorInfo"
        :key="index"
        class="flex justify-between items-center"
      >
        <CounselorCard :counselor-info="item" />
      </view>
    </wd-cell-group>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { consultAll } from '@/api/consult'
import { getOption } from '@/api/dict'

const value1 = ref<number>(0)
const value2 = ref<number>(0)
const value3 = ref<number>(0)
const value4 = ref<number>(0)
const value5 = ref<number>(0)

interface Consult {
  id: number
  name: string
  goodAt: string
  address: string
  price: number
  info: string
  avatar: string
}

const counselorInfo = ref<Consult[]>()

const option = ref<Record<string, any>>([])
const address = ref<Record<string, any>>([])
const price = ref<Record<string, any>>([])
const desc = ref<Record<string, any>>([])
const filter = ref<Record<string, any>>([])

const searchValue = ref('')

function handleChange1({ value }) {
  console.log(value)
}

onShow(() => {
  console.log('咨询师onLaunch')
  consultAll().then((res: any) => {
    counselorInfo.value = res.data.records
    counselorInfo.value.forEach((item: any) => {
      item.avatar = 'https://img.yzcdn.cn/vant/cat.jpeg'
    })
  })
  getOption({ dictType: 'consult_direction' }).then((res: any) => {
    option.value = res.data
  })
  getOption({ dictType: 'consult_address' }).then((res: any) => {
    address.value = res.data
  })
  getOption({ dictType: 'consult_price' }).then((res: any) => {
    price.value = res.data
  })
  getOption({ dictType: 'consult_desc' }).then((res: any) => {
    desc.value = res.data
  })
  getOption({ dictType: 'consult_filter' }).then((res: any) => {
    filter.value = res.data
  })
})
</script>

<style lang="scss" scoped>
:deep(.wd-drop-menu:not(:last-child)) {
  margin-right: 36rpx;
  /* 或者你想要的任何间隔大小 */
}

:deep(.filter-btn) {
  background: #fff;
}
</style>
